<template>
    <div class="bigbox">
        <div class="top"><input type="text" v-model="value" @keydown="huiche($event)"><button @click="adddate()">添加事件</button></div>
         <div class="mid">
         <keep-alive>
        <component :is="flag"></component>
        </keep-alive>
        </div>
        <div class="buttwn"><button @click="all($event)">所有的</button>  <button @click="unfinished()">未完成</button>   <button @click="finished()">完成的</button></div>
    </div>
</template>

<script>
import Workall from "@/components/Workall"
import Worked from '@/components/Worked.vue'
import Working from '@/components/Working.vue'

export default {
   data() {
       return {
           value:"",
           flag:Workall
       }
   },
   methods: {
       //加事件
       adddate(){
           this.$store.state.allarr.push(this.value)
           this.value=""
       },
       huiche(e){
           if(e.keyCode==13){
               this.$store.state.allarr.push(this.value)
               this.value=""
           }
           else{
               return
           }
       },
       //切换所有的组件
       all(){
           this.flag=Workall
       },
       //切换完成了的组件
       unfinished(){
           this.$store.state.unfinishedarr=[]
           this.flag=Working
           this.instend(this.$store.state.allarr,this.$store.state.finishedarr)
       },
       //切换完成了的组件
       finished(){
           this.flag=Worked
       },
            shanhcu(e){
       console.log(666666);
         console.log(e.target);
     },
       instend(one,tow){
         var a = one;
         var b = tow;
         var tmp = a.concat(b); 
         var o = {};
         var x
         for (var i = 0; i < tmp.length; i ++) (tmp[i] in o) ? o[tmp[i]] ++ : o[tmp[i]] = 1;
         for (x in o) if (o[x] == 1) this.$store.state.unfinishedarr.push(x);
      }
   },
}
</script>

<style >
 *{
     padding: 0;
     margin: 0;
 }
 .bigbox{
     width: 250px;
     height: auto;
     background-color: coral;
 }
 input {
     width: 188px;
     height: 20px;
     margin: 0;
     padding: 0; 
 }
 .buttwn {
     display: flex;
     justify-content: space-evenly;
     background-color: gray;
 }
.buttwn button {
       background-color: grey;
}
.mid{
      cursor: pointer;
}
li {
      border: 1px dashed gray;
      margin: 2px 0px;
      text-align: center;
    }
</style>